<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
       
        <h3>{{msg}}</h3>


        <!-- 使用过滤器 -->
        <h3>{{msg | f1}}</h3>

        <!-- 使用过滤器 -->
        <h3>{{msg | padding6 }}</h3>
        
    </div>

    <script>
        // vue中的过滤器
        // 作用： 在显示数据之前，做一次格式转化

        // 定义格式
        // filters: {
        //     过滤器名： function (value,其它参数) {

        //     }
        // }

        // 使用格式 
        // {{ msg | 过滤器}}


        // {{msg}}  =====》 console.log(msg)
        // {{msg | f1}}  =====》 console.log(   f1(msg)  )

        const vm = new Vue({
            el: "#app",
            data: {
                msg: 'vue'
            },
            // 过滤器列表
            filters: {
                // {{msg | f1}}
                // 会去:
                // 1. 调用f1这个函数，并自动把
                // msg传进来给value
                // 2. 把f1函数的返回值显示出来
                f1 (value) {
                    console.log(value)
                    return 'hahaha'
                },
                padding6 (str) {
                    // 对于字符串，不足6位，
                    // 左侧补0
                    // String(str) 类型转换
                    // padStart: 在左侧补足字符串
                    //字符串.padStart(总长度，填充的字符)
                    return String(str).padStart(6, "*")
                }
            }
        })
     
    </script>

</body>
</html>